<template>
	<div class="ml-36">
		<div class="pb-4">{{ movie.name }}</div>
		<div class="mb-[100px]">
			<div class="flex h-full">
				<div class="h-full">
					<el-image :src="movie.posterAddress" class="w-[350px] h-[400px]" fit="fill" />
					<!--					<img :src="movie.posterAddress" class="w-[300px] h-full" alt="" />-->
				</div>
				<div class="border-r-2 border-dotted w-[400px] h-full mr-2 ml-2 flex flex-col">
					<div>影视名称:{{ movie.name }}</div>
					<div>
						演员:
						<span class="divide-x" v-for="(item, index) in movie.actorList" :key="index"> {{ item.name }} / </span>
					</div>
					<div>类型:{{ movie.sort === 1 ? "电影" : "电视剧" }}</div>
					<div>国家:{{ movie.country }}</div>
					<div>发布年份:{{ movie.year }}</div>
					<div class="flex">
						标签:
						<router-link
							:to="`/tags?tag=${item.id}`"
							class="mr-1 text-cyan-600 border-b-2"
							v-for="(item, index) in movie.tagList"
							:key="index"
							>{{ item.tagName }}
						</router-link>
					</div>
					<!--					<div v-if="movie.sort === 1">片长:{{ movie.time }} 分钟</div>-->
					<p class="overflow-ellipsis overflow-hidden flex-1" style="">简介:{{ movie.description }}</p>
				</div>
				<div class="pl-5 flex flex-col justify-between">
					<div>
						<div>本网站评分</div>
						<div>{{ movie.score }}</div>
						<div>
							<div v-for="(tag, index) in tagScore" :key="index">{{ tag.tagName }}: {{ tag.score }}</div>
						</div>
					</div>
					<div>
						<div>豆瓣评分</div>
						<div>{{ movie.douban ?? "暂无评分" }}</div>
					</div>
					<div>
						<div>IMDB评分</div>
						<div>{{ movie.imdb ?? "暂无评分" }}</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<el-button class="mt-2" @click="postCollection">点击收藏</el-button>
		</div>

		<div class="mt-10 mb-[50px]">
			<div class="text-2xl">进行评分</div>
			<div class="mt-2 mb-2">
				<span
					:class="['mr-5', { 'text-cyan-600': tagId === item.id }, 'border-b-2', 'cursor-pointer']"
					v-for="(item, index) in movie.tagList"
					:key="index"
					@click="showScore(item.id)"
					>{{ item.tagName }}
				</span>
			</div>
			<div>
				<el-rate v-model="moveRate" :max="10" />
			</div>
			<div>
				<el-button type="primary" class="mt-2" @click="postMoveRate">提交</el-button>
			</div>
		</div>

		<div class="">
			<span>发表评论</span>
			<div class="w-[500px]">
				<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="postCommentMessage" />
				<el-button type="primary" class="mt-2" @click="postComment">发表</el-button>
			</div>
		</div>

		<div class="w-[60%] mt-20">
			<div class="text-2xl text-[#93C5FD]">《{{ movie.name }}》的短评</div>
			<div class="w-full">
				<div v-for="(item, index) in commentPage.commentList" :key="index" class="pb-1 mb-1">
					<div class="flex border-b-2 mb-2">
						<div class="flex">
							<div>
								<el-avatar :src="item.root.member.avatar" class="w-[50px] h-[50px]" />
							</div>
						</div>
						<div class="ml-3 break-all mb-2 w-full">
							<div class="flex justify-between">
								<div>{{ item.root.member.username }}</div>
								<div>{{ item.root.createTime }}</div>
							</div>
							<div>
								{{ item.root.content.message }}
							</div>
							<div class="cursor-pointer text-blue-400" @click="replyRoot(item.root.id, item.root.member.id, item.root.id)">回复</div>
							<div class="flex items-center" v-if="commentPostVo.parent === item.root.id">
								<input v-model="commentPostVo.message" type="text" class="rounded-lg text-black pl-3 pr-4 pt-1 pb-1" />
								<el-button type="primary" @click="postReply">发表</el-button>
							</div>
						</div>
					</div>
					<div class="">
						<div v-for="(reply, replyIndex) in item.replies" :key="replyIndex" class="flex border-b-2 pl-11 mt-3">
							<div class="flex">
								<div>
									<el-avatar :src="reply.member.avatar" class="w-[50px] h-[50px]" />
								</div>
							</div>
							<div class="ml-3 break-all w-full">
								<div class="flex justify-between w-full">
									<div>{{ reply.member.username }}</div>
									<div>{{ reply.createTime }}</div>
								</div>
								<div>{{ reply.content.message }}</div>
								<span class="cursor-pointer text-blue-400" @click="replyRoot(reply.id, reply.member.id, item.root.id)">回复</span>
								<div class="flex items-center" v-if="commentPostVo.parent === reply.id">
									<input v-model="commentPostVo.message" type="text" class="rounded-lg text-black pl-3 pr-4 pt-1 pb-1" />
									<el-button type="primary" @click="postReply">发表</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<el-pagination
				style="margin-bottom: 20px"
				background
				layout="prev, pager, next"
				:page-count="commentPage.pages"
				v-model:current-page="commentPage.current"
				@update:current-page="loadComment"
			/>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { getMoveById } from "@/api/move";
import { addComment, getListAllComments } from "@/api/comment";
import { useUserStore } from "@/stores/userStores";
import { ElMessage } from "element-plus";
import { getScoreByMoveAndTag, getScoreByMovieId, saveScore } from "@/api/score";
import { addCollection } from "@/api/collection";
import router from "@/router";

const route = useRoute();

const userStore = useUserStore();
const userInfo = userStore.getUserInfo();
const movie = ref({
	actorList: [],
	tagList: [],
});

const commentPostVo = reactive({
	otherId: route.query.id,
	root: 0,
	parent: 0,
	message: "",
	replyId: userInfo.id,
	replyedId: 0,
});
const replyRoot = (parentId, replyedId, root = 0) => {
	commentPostVo.message = "";
	commentPostVo.root = root;
	commentPostVo.parent = parentId;
	commentPostVo.replyedId = replyedId;
};

const postCommentMessage = ref("");
const postComment = () => {
	commentPostVo.message = postCommentMessage.value;
	commentPostVo.root = 0;
	commentPostVo.parent = 0;
	commentPostVo.replyedId = null;
	postReply();
};

const postReply = async () => {
	if (commentPostVo.message === "") {
		return;
	}
	const result = await addComment(commentPostVo);
	if (result.success) {
		ElMessage.success({ message: "回复成功" });
	} else {
		ElMessage.error({ message: "回复失败" });
	}
	commentPostVo.message = "";
	commentPostVo.root = 0;
	commentPostVo.parent = 0;
	commentPostVo.replyedId = null;
	// await router.replace({query: {id: route.query.id}});
	location.reload();
};

const moveRate = ref(0);
const tagId = ref();
const postMoveRate = async () => {
	if (tagId.value === null || tagId.value === undefined || tagId.value === "") {
		ElMessage.error({ message: "请选择标签进行评分" });
		return;
	}
	const result = await saveScore({
		moveId: route.query.id,
		userId: userInfo.id,
		score: moveRate.value,
		tagId: tagId.value,
	});
	if (result.success) {
		// 提交成功
		ElMessage.success({ message: "评分成功" });
		moveRate.value = 0;
		location.reload();
	}
};

const showScore = async (tag) => {
	const res = await getScoreByMoveAndTag(route.query.id, tag);
	tagId.value = tag;
	if (res.success) {
		moveRate.value = res.data?.score ?? 0;
	}
};

const postCollection = async () => {
	const result = await addCollection({
		moveId: route.query.id,
		userId: userInfo.id,
	});
	if (result.success) {
		ElMessage.success({ message: "收藏成功" });
	} else {
	}
};

const commentPage = reactive({
	commentList: [],
	size: 30,
	current: 1,
	pages: 0,
	page: 1,
});

const loadMoves = async () => {
	const result = await getMoveById(route.query.id);
	movie.value = result.data;
};

const loadComment = async () => {
	const result = await getListAllComments(route.query.id, commentPage.current, commentPage.size);
	commentPage.commentList = result.data.page.list;
	commentPage.current = result.data.page.pageNum;
	commentPage.size = result.data.page.size;
	commentPage.page = result.data.page.page;
};

const tagScore = ref([]);
const loadTagScore = async () => {
	const res = await getScoreByMovieId(route.query.id);
	if (res.success) {
		tagScore.value = res.data;
	}
};

onMounted(() => {
	loadComment();
	loadMoves();
	loadTagScore();
});
</script>

<style scoped></style>
